<template>
  <div class="_about-realbox" :class="{_mobile: isMobile}">
    <el-collapse title="Consistency">
      <el-collapse-item>
        <template #title>
          <div class="_title">
            <img class="_icon" :src="AboutIcon" />
            <span class="_text-middle">About Realbox</span>
          </div>
        </template>
        <template #icon="{ isActive }">
          <div class="_custom-icon">
            <div
              class="_custom-icon-item _animation-icon"
              :class="{ _active: isActive }"
            ></div>
            <div class="_custom-icon-item"></div>
          </div>
        </template>
        <div class="_qeustion-list">
          <div class="_question-item" v-for="item in questions" :key="item.question">
            <div class="_question _text-large">{{ item.question }}</div>
            <div class="_answer _text-small">
              {{ item.answer }}
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="tsx" setup>
import AboutIcon from "@/assets/about.png";
import { useMedia } from "@/hooks/useMedia"

const isMobile = useMedia();

const questions = [
  {
    question: 'What is RealBox?',
    answer: `RealBox revolutionizes online shopping with its "Gamified-Shopping" approach, offering digital "Boxes" filled with a diverse selection of products from top brands you know and love.`
  },
  {
    question: 'Is RealBox safe and fair to use?',
    answer: `Yes! RealBox uses advanced security measures to ensure a safe and fair experience for all users. Every box opening is transparent and verifiable.`
  },
  {
    question: 'Is RealBox trustworthy?',
    answer: `Absolutely! We maintain full transparency in our operations and are committed to providing a trustworthy platform for all our users.`
  },
  {
    question: 'How do I open a box?',
    answer: `Simply browse our selection of boxes, choose one you like, and click "Open" to reveal your prize. Make sure you have sufficient balance in your account.`
  },
  {
    question: 'How do I deposit?',
    answer: `Click on the deposit button, choose your preferred payment method, and follow the simple instructions to add funds to your account.`
  },
  {
    question: 'Missing crypto deposit?',
    answer: `If your crypto deposit hasn't arrived, please check the transaction status and contact our support team with your transaction details.`
  },
  {
    question: 'What are Battles?',
    answer: `Battles are exciting competitions where users open boxes simultaneously. The player with the highest total value wins additional rewards!`
  },
  {
    question: 'How do I get Support?',
    answer: `Our support team is available 24/7. Click the support button or email us for assistance with any questions or concerns.`
  },
]
</script>

<style lang="less">
._about-realbox {
  background: #232829;
  border-radius: 0.5rem;
  .el-collapse {
    border: none;
    --el-collapse-header-bg-color: transparent;
    --el-collapse-content-bg-color: transparent;
    --el-collapse-header-height: 3.75rem;
    .el-collapse-item__wrap,
    .el-collapse-item__header {
      border: none;
    }
  }

  ._title {
    @apply flex items-center;
    gap: 1.25rem;
    padding-left: 1rem;
    color: #fff;
    img {
      width: 2.5rem;
      object-fit: contain;
    }
  }

  ._custom-icon {
    @apply relative flex items-center justify-center;
    margin: 0 1rem 0 auto;
    color: #409eff;
    width: 1.56rem;
    aspect-ratio: 1/1;
    min-height: 0;
    ._custom-icon-item {
      position: absolute;
      width: 100%;
      height: 0.2rem;
      background-color: var(--el-color-primary);
      border-radius: 0.2rem;
      &._animation-icon {
        transform: rotate(-90deg);
        transition: all 0.3s;
        &._active {
          transform: rotate(-0deg);
        }
      }
    }
  }

  ._qeustion-list {
    @apply flex flex-col;
    gap: 2rem;
    padding: 1rem;
    color: #fff;
    ._question-item {
      @apply flex flex-col;
      gap: 1rem;
      ._answer {
        line-height: 1.58rem;
      }
    }
  }
}

._about-realbox {
  &._mobile {
    .el-collapse {
      --el-collapse-header-height: 2.5rem;
    }

    ._title {
      gap: 0.75rem;
      img {
        width: 1.25rem;
        height: 1.25rem;
      }

      ._text-middle {
        font-size: 1rem;
        line-height: 1.13rem;
      }
    }

    ._custom-icon {
      width: 0.78rem;
      ._custom-icon-item {
        height: 0.1rem;
      }
    }
  }
}
</style>
